<template>
  <div class="savepoints-container">
    <!-- 页面标题和操作按钮 -->
    <div class="page-header">
      <div class="header-background">
        <div class="bg-pattern"></div>
        <div class="bg-gradient"></div>
      </div>
      
      <div class="page-title">
        <div class="title-icon">
          <div class="icon-container" style="width: 36px; height: 36px; background: linear-gradient(135deg, #e6a23c 0%, #f0c78a 100%); border-radius: 8px; color: white; box-shadow: 0 2px 8px rgba(230, 162, 60, 0.2);">
            <el-icon size="20"><Files /></el-icon>
            <div class="icon-glow"></div>
          </div>
        </div>
        <div class="title-content">
          <div class="title-main">
            <h1>保存点管理</h1>
            <div class="title-badge">
              <el-icon><Star /></el-icon>
              <span>Data</span>
            </div>
          </div>
          <p class="page-description">
            <el-icon><Monitor /></el-icon>
            查看和管理Data作业的Savepoint历史记录，确保数据安全
          </p>
          <div class="title-meta">
            <div class="meta-item">
              <el-icon><Clock /></el-icon>
              <span>历史记录</span>
            </div>
            <div class="meta-item">
              <el-icon><Lock /></el-icon>
              <span>数据安全</span>
            </div>
            <div class="meta-item">
              <el-icon><Menu /></el-icon>
              <span>状态监控</span>
            </div>
          </div>
        </div>
      </div>
      
      <div class="page-stats">
        <div class="stat-card total">
          <div class="stat-icon">
            <el-icon><Menu /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-number">{{ totalAll || total }}</div>
            <div class="stat-label">Savepoint总数</div>
            <div class="stat-trend">
              <el-icon><Menu /></el-icon>
              <span>全部</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 搜索和筛选区域 -->
    <div class="search-section">
      <el-card shadow="hover" class="search-card">
        <template #header>
          <div class="search-header">
            <div class="search-title">
              <el-icon><Search /></el-icon>
              <span>搜索与筛选</span>
            </div>
          </div>
        </template>
        <el-form :model="searchForm" class="search-form">
          <div class="search-form-content">
            <div class="search-form-fields">
              <el-form-item label="作业名称">
            <el-input
                  v-model="searchForm.job_name"
                  placeholder="请输入作业名称"
              clearable
                  style="width: 200px"
            />
          </el-form-item>
          
          <el-form-item label="触发原因">
            <el-select v-model="searchForm.trigger_reason" placeholder="选择触发原因" clearable style="width: 180px">
              <el-option label="全部" value="" />
              <el-option label="手动触发 (MANUAL)" value="MANUAL" />
              <el-option label="定时触发 (SCHEDULED)" value="SCHEDULED" />
              <el-option label="创建触发 (CREATED)" value="CREATED" />
              <el-option label="停止触发 (STOP)" value="STOP" />
              <el-option label="重启触发 (RESTART)" value="RESTART" />
              <el-option label="失败触发 (FAILURE)" value="FAILURE" />
            </el-select>
          </el-form-item>
            </div>
          
            <div class="search-form-actions">
              <el-button type="primary" @click="handleSearch" class="search-btn">
              <el-icon><Search /></el-icon>
              搜索
            </el-button>
              <el-button type="warning" @click="handleReset" class="reset-btn">
              <el-icon><Refresh /></el-icon>
              重置
            </el-button>
              <el-button type="info" @click="showFieldSelector = !showFieldSelector" class="field-btn">
                <el-icon>
                  <component :is="showFieldSelector ? 'ArrowUp' : 'ArrowDown'" />
                </el-icon>
                字段设置
              </el-button>
            </div>
          </div>
        </el-form>
        
        <!-- 字段设置面板 -->
        <transition name="field-panel">
          <div v-if="showFieldSelector" class="field-selector-panel">
            <div class="field-sorter">
              <div class="sorter-header">
                <h4>字段排序设置</h4>
                <p class="sorter-description">使用上下箭头调整字段显示顺序，勾选要显示的字段</p>
              </div>
              <div class="field-list-sortable">
                <div
                  v-for="(field, index) in sortedFields"
                  :key="field.value"
                  class="field-item"
                  :class="{ 'field-disabled': !selectedFields.includes(field.value) }"
                >
                  <div class="field-drag-handle">
                    <span class="drag-icon">⋮⋮</span>
                  </div>
                  <el-checkbox
                    v-model="selectedFields"
                    :value="field.value"
                    :disabled="field.required"
                    class="field-checkbox"
                  >
                    <span class="field-label">{{ field.label }}</span>
                    <span v-if="field.required" class="required-mark">*</span>
                  </el-checkbox>
                  <div class="field-group-tag">
                    <el-tag size="small" :type="getGroupTagType(field.group)">
                      {{ getGroupTitle(field.group) }}
                    </el-tag>
                  </div>
                  <div class="field-sort-controls">
                    <el-button
                      size="small"
                      :disabled="index === 0"
                      @click="moveFieldUp(index)"
                      circle
                      type="primary"
                      plain
                    >
                      ↑
                    </el-button>
                    <el-button
                      size="small"
                      :disabled="index === sortedFields.length - 1"
                      @click="moveFieldDown(index)"
                      circle
                      type="primary"
                      plain
                    >
                      ↓
                    </el-button>
                  </div>
                </div>
              </div>
            </div>
            
            <!-- 字段设置操作按钮 -->
            <div class="field-actions">
              <el-button type="primary" @click="saveCurrentFieldSettings">
                <el-icon><Check /></el-icon>
                保存设置
              </el-button>
              <el-button @click="resetFieldSettings">
                <el-icon><Refresh /></el-icon>
                重置默认
              </el-button>
              <el-button @click="showFieldSelector = false">
                <el-icon><Close /></el-icon>
                关闭
              </el-button>
            </div>
          </div>
        </transition>
      </el-card>
    </div>

    <!-- Savepoint列表 -->
    <div class="table-section">
      <el-card shadow="hover" class="table-card">
        <template #header>
          <div class="table-header">
            <div class="table-title">
              <el-icon><List /></el-icon>
              <span>保存点列表</span>
            </div>
            <div class="table-header-actions">
              <el-button type="success" @click="handleRefresh" class="refresh-btn" :loading="loading" size="small">
                <el-icon><Refresh /></el-icon>
                刷新
              </el-button>
              <div class="table-info">
                <!-- 合并的分页信息控制 -->
                <div class="pagination-control-wrapper" @click="paginationExpanded = !paginationExpanded">
                  <span class="page-count">本页 {{ savepoints.length }} 条</span>
                  <div class="divider"></div>
                  <span class="pagination-info">{{ currentPage }}/{{ Math.ceil(total / pageSize) }}</span>
                  <el-icon class="pagination-icon" :class="{ 'expanded': paginationExpanded }">
                    <ArrowDown />
                  </el-icon>
                </div>
              </div>
            </div>
          </div>
        </template>
        <div class="table-container">
          <el-table
            v-loading="loading"
            :data="savepoints"
            :default-sort="{ prop: 'creation_time', order: 'descending' }"
            @sort-change="handleSortChange"
            style="width: 100%;"
            :row-key="row => row.id || row.job_id"
            :height="600"
            :virtual-scrolling="false"
            :virtual-scroll-item-size="50"
            table-layout="auto"
            :row-class-name="getRowClassName"
            class="enhanced-table"
          >
            <!-- 动态列 -->
          <el-table-column
              v-for="field in visibleFields"
              :key="field.value"
              :prop="field.value"
              :label="getFieldLabel(field.value)"
              :width="getColumnWidth(field.value)"
              :min-width="getColumnMinWidth(field.value)"
              :sortable="field.value === 'creation_time' ? 'custom' : false"
              :sort-orders="['descending', 'ascending', null]"
              :show-overflow-tooltip="getFieldShowOverflow(field.value)"
            >
            <template #default="{ row }">
                <!-- 作业ID字段 -->
                <div v-if="field.value === 'job_id'" class="job-id-cell">
                  <el-text size="small" type="info" class="job-id-text">{{ row.job_id || '-' }}</el-text>
                  <el-tooltip content="复制作业ID" placement="top">
                    <el-button 
                      type="info"
                      size="small" 
                      @click.stop="copyToClipboard(row.job_id, '作业ID')" 
                      circle
                      class="copy-btn-savepoint"
                    >
                      <el-icon><DocumentCopy /></el-icon>
                    </el-button>
                  </el-tooltip>
                </div>
                
                <!-- 作业名称字段 -->
                <div v-else-if="field.value === 'job_name'" class="job-name-cell-savepoint">
                  <span class="job-name-text-savepoint">{{ row.job_name }}</span>
                  <el-tooltip content="复制作业名称" placement="top">
                    <el-button 
                      type="info"
                      size="small" 
                      @click.stop="handleCopyJobName(row.job_name)" 
                      circle
                      class="copy-btn-savepoint"
                    >
                      <el-icon><DocumentCopy /></el-icon>
                    </el-button>
                  </el-tooltip>
                </div>
                
                <!-- Savepoint路径字段 -->
                <div v-else-if="field.value === 'savepoint_path'" class="savepoint-path-cell">
                  <el-text size="small" class="path-text-ellipsis">{{ row.savepoint_path || '-' }}</el-text>
                  <el-tooltip content="复制Savepoint路径" placement="top">
                    <el-button 
                      type="info"
                      size="small" 
                      @click.stop="copyToClipboard(row.savepoint_path, 'Savepoint路径')" 
                      circle
                      class="copy-btn-savepoint"
                    >
                      <el-icon><DocumentCopy /></el-icon>
                    </el-button>
                  </el-tooltip>
                </div>
                
                <!-- 创建时间字段 -->
                <div v-else-if="field.value === 'creation_time'" class="field-content">
              <el-text size="small">{{ formatTime(row.creation_time) }}</el-text>
                </div>
                
                <!-- 触发原因字段 -->
                <div v-else-if="field.value === 'trigger_reason'" class="field-content">
              <el-tag 
                :type="getTriggerReasonType(row.trigger_reason)" 
                :effect="getTriggerReasonEffect(row.trigger_reason)"
                size="small"
                class="status-tag"
              >
                <el-icon><component :is="getTriggerReasonIcon(row.trigger_reason)" /></el-icon>
                <span>{{ getTriggerReasonLabel(row.trigger_reason) }}</span>
              </el-tag>
                </div>
                
                <!-- 状态字段 -->
                <div v-else-if="field.value === 'status'" class="field-content">
              <el-tag 
                :type="getStatusType(row.status)" 
                :effect="getStatusEffect(row.status)"
                size="small"
                class="status-tag"
              >
                <el-icon><component :is="getStatusIcon(row.status)" /></el-icon>
                <span>{{ getStatusLabel(row.status) }}</span>
              </el-tag>
                </div>
                
                <!-- 默认字段 -->
                <div v-else class="field-content">
                  <el-text size="small">{{ row[field.value] || '-' }}</el-text>
                </div>
            </template>
          </el-table-column>
          
          <!-- 操作列 -->
          <el-table-column label="操作" width="70" fixed="right" align="center" header-align="center">
            <template #default="{ row }">
              <div class="action-buttons">
                <el-tooltip content="查看详情" placement="top">
                  <el-button
                    type="primary"
                    size="small"
                    @click="viewDetails(row)"
                    circle
                  >
                    <el-icon><View /></el-icon>
                  </el-button>
                </el-tooltip>
              </div>
            </template>
          </el-table-column>
        </el-table>
        </div>
        
        <!-- 可折叠分页 -->
        <div v-show="paginationExpanded" class="pagination">
          <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[10, 20, 50, 100]"
            :total="total"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            class="enhanced-pagination"
          />
        </div>
      </el-card>
    </div>

    <!-- Savepoint详情对话框 -->
    <SavepointDetailDialog
      v-model="showDetailDialog"
      :savepoint="currentSavepoint"
    />
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { storeToRefs } from 'pinia'
import { useSavepointsStore } from '@/stores/savepoints'
import { useAppStore } from '@/stores/app'
import { ElMessage } from 'element-plus'
import { componentLogger } from '@/utils/logger'
import { copyToClipboard as copyText } from '@/utils/clipboard'
import dayjs from 'dayjs'
import { debounce } from 'lodash-es'
import FieldSelector from '@/components/FieldSelector.vue'
import SavepointDetailDialog from './components/SavepointDetailDialog.vue'

const savepointsStore = useSavepointsStore()
const appStore = useAppStore()
const { sidebarCollapsed } = storeToRefs(appStore)

// 响应式数据
const showDetailDialog = ref(false)
const currentSavepoint = ref(null)
const showFieldSelector = ref(false)
const paginationExpanded = ref(false)

// 字段选择 - 默认显示所有重要字段（按逻辑顺序排列）
const selectedFields = ref([
  'id', 'job_id', 'job_name', 'savepoint_path', 'status', 'trigger_reason', 'creation_time'
])

// 字段配置 - 与后端 API 字段保持一致，按逻辑顺序组织
const fieldConfig = {
  basic: [
    { value: 'id', label: 'ID', group: 'basic', width: 80 },
    { value: 'job_id', label: '作业ID', default: true, group: 'basic', width: 200 },
    { value: 'job_name', label: '作业名称', required: true, default: true, group: 'basic', width: 250 },
    { value: 'savepoint_path', label: 'Savepoint路径', default: true, group: 'basic', minWidth: 300 }
  ],
  status: [
    { value: 'status', label: '状态', default: true, group: 'status', width: 120, order: 5 },
    { value: 'trigger_reason', label: '触发原因', default: true, group: 'status', width: 120, order: 6 }
  ],
  time: [
    { value: 'creation_time', label: '创建时间', default: true, group: 'time', width: 160, order: 7 }
  ]
}

// 计算属性
const allFields = computed(() => {
  return Object.values(fieldConfig).flat()
})

const sortedFields = computed(() => {
  return allFields.value.sort((a, b) => {
    const aIndex = selectedFields.value.indexOf(a.value)
    const bIndex = selectedFields.value.indexOf(b.value)
    return aIndex - bIndex
  })
})

const visibleFields = computed(() => {
  return allFields.value.filter(field => selectedFields.value.includes(field.value))
})

// Savepoints页面只显示总数，不需要状态统计方法

// 字段相关方法
const getFieldIcon = (fieldValue) => {
  const iconMap = {
    'id': 'Key',
    'job_id': 'Ticket',
    'job_name': 'Document',
    'savepoint_path': 'Folder',
    'creation_time': 'Clock',
    'trigger_reason': 'Flag',
    'status': 'CircleCheck'
  }
  return iconMap[fieldValue] || 'Menu'
}

const getFieldSubtitle = (fieldValue) => {
  const subtitleMap = {
    'id': 'ID',
    'job_id': 'Job ID',
    'job_name': 'Job Name',
    'savepoint_path': 'Savepoint Path',
    'creation_time': 'Created At',
    'trigger_reason': 'Trigger Reason',
    'status': 'Status'
  }
  return subtitleMap[fieldValue] || 'Field'
}

// 获取列固定宽度
const getColumnWidth = (fieldValue) => {
  const widthMap = {
    'job_name': 350  // 作业名称使用固定宽度，不换行不隐藏
  }
  return widthMap[fieldValue] || undefined
}

const getColumnMinWidth = (fieldValue) => {
  const minWidthMap = {
    'id': 80,
    'job_id': 200,
    'job_name': undefined,  // 作业名称使用固定宽度，不需要min-width
    'savepoint_path': 280,
    'creation_time': 160,
    'trigger_reason': 110,
    'status': 110
  }
  return minWidthMap[fieldValue] || 120
}

// 判断字段是否显示溢出提示
const getFieldShowOverflow = (fieldValue) => {
  const overflowFields = [
    'job_id', 'savepoint_path'
  ]
  return overflowFields.includes(fieldValue)
}

const getGroupTagType = (group) => {
  const typeMap = {
    'basic': 'primary',
    'status': 'success',
    'time': 'warning'
  }
  return typeMap[group] || 'info'
}

const getGroupTitle = (group) => {
  const titleMap = {
    'basic': '基础信息',
    'status': '状态信息',
    'time': '时间信息'
  }
  return titleMap[group] || '其他'
}

const moveFieldUp = (index) => {
  if (index > 0) {
    const fields = [...sortedFields.value]
    ;[fields[index], fields[index - 1]] = [fields[index - 1], fields[index]]
    selectedFields.value = fields.map(f => f.value)
  }
}

const moveFieldDown = (index) => {
  if (index < sortedFields.value.length - 1) {
    const fields = [...sortedFields.value]
    ;[fields[index], fields[index + 1]] = [fields[index + 1], fields[index]]
    selectedFields.value = fields.map(f => f.value)
  }
}

const saveCurrentFieldSettings = () => {
  localStorage.setItem('savepoints_selected_fields', JSON.stringify(selectedFields.value))
  ElMessage.success('字段设置已保存')
  showFieldSelector.value = false
}

const resetFieldSettings = () => {
  selectedFields.value = ['id', 'job_id', 'job_name', 'savepoint_path', 'status', 'trigger_reason', 'creation_time']
  localStorage.removeItem('savepoints_selected_fields')
  ElMessage.success('字段设置已重置')
}

const getRowClassName = ({ row }) => {
  if (row.status === 'COMPLETED') return 'row-success'
  if (row.status === 'FAILED') return 'row-danger'
  if (row.status === 'IN_PROGRESS') return 'row-warning'
  return ''
}

// 计算属性 - 使用缓存优化性能
const savepoints = computed(() => savepointsStore.savepoints)
const loading = computed(() => savepointsStore.loading)
const total = computed(() => savepointsStore.total)
const totalAll = computed(() => savepointsStore.totalAll)
const currentPage = computed({
  get: () => savepointsStore.currentPage,
  set: (value) => { savepointsStore.currentPage = value }
})
const pageSize = computed({
  get: () => savepointsStore.pageSize,
  set: (value) => { savepointsStore.pageSize = value }
})
const searchForm = computed(() => savepointsStore.searchForm)

// 缓存状态类型计算
const triggerReasonTypeCache = new Map()
const getTriggerReasonType = (reason) => {
  if (triggerReasonTypeCache.has(reason)) {
    return triggerReasonTypeCache.get(reason)
  }
  const reasonMap = {
    'MANUAL': 'primary',
    'SCHEDULED': 'success',
    'CREATED': 'info',
    'STOP': 'warning',
    'RESTART': '',
    'FAILURE': 'danger',
    'AUTO': 'success',
    'FAILOVER': 'danger'
  }
  const result = reasonMap[reason] || 'info'
  triggerReasonTypeCache.set(reason, result)
  return result
}

// 触发原因效果
const getTriggerReasonEffect = (reason) => {
  const effectMap = {
    'MANUAL': 'dark',
    'SCHEDULED': 'plain',
    'CREATED': 'light',
    'STOP': 'plain',
    'RESTART': 'dark',
    'FAILURE': 'dark'
  }
  return effectMap[reason] || 'light'
}

// 触发原因图标
const getTriggerReasonIcon = (reason) => {
  const iconMap = {
    'MANUAL': 'User',
    'SCHEDULED': 'Clock',
    'CREATED': 'Plus',
    'STOP': 'VideoPause',
    'RESTART': 'Refresh',
    'FAILURE': 'CircleClose'
  }
  return iconMap[reason] || 'QuestionFilled'
}

// 触发原因标签
const getTriggerReasonLabel = (reason) => {
  const labelMap = {
    'MANUAL': '手动触发',
    'SCHEDULED': '定时触发',
    'CREATED': '创建触发',
    'STOP': '停止触发',
    'RESTART': '重启触发',
    'FAILURE': '失败触发'
  }
  return labelMap[reason] || reason || 'UNKNOWN'
}

const statusTypeCache = new Map()
const getStatusType = (status) => {
  if (statusTypeCache.has(status)) {
    return statusTypeCache.get(status)
  }
  const statusMap = {
    'CREATED': 'info',
    'COMPLETED': 'success',
    'FAILED': 'danger',
    'IN_PROGRESS': 'warning',
    'PENDING': 'info',
    'CANCELLED': ''
  }
  const result = statusMap[status] || 'info'
  statusTypeCache.set(status, result)
  return result
}

// 状态效果
const getStatusEffect = (status) => {
  const effectMap = {
    'CREATED': 'plain',
    'COMPLETED': 'dark',
    'FAILED': 'dark',
    'IN_PROGRESS': 'plain',
    'PENDING': 'light',
    'CANCELLED': 'plain'
  }
  return effectMap[status] || 'light'
}

// 状态图标
const getStatusIcon = (status) => {
  const iconMap = {
    'CREATED': 'DocumentAdd',
    'COMPLETED': 'CircleCheck',
    'FAILED': 'CircleClose',
    'IN_PROGRESS': 'Loading',
    'PENDING': 'Clock',
    'CANCELLED': 'Remove'
  }
  return iconMap[status] || 'QuestionFilled'
}

// 状态标签
const getStatusLabel = (status) => {
  const labelMap = {
    'CREATED': '已创建',
    'COMPLETED': '已完成',
    'FAILED': '已失败',
    'IN_PROGRESS': '进行中',
    'PENDING': '等待中',
    'CANCELLED': '已取消'
  }
  return labelMap[status] || status || 'UNKNOWN'
}

// 缓存时间格式化结果
const timeFormatCache = new Map()
const formatTime = (time) => {
  if (!time) return '-'
  if (timeFormatCache.has(time)) {
    return timeFormatCache.get(time)
  }
  const formatted = dayjs(time).format('YYYY-MM-DD HH:mm:ss')
  timeFormatCache.set(time, formatted)
  return formatted
}

// 方法
const handleSearch = () => {
  currentPage.value = 1
  fetchSavepoints()
}

const handleReset = () => {
  savepointsStore.resetSearch()
  fetchSavepoints()
}

const handleRefresh = () => {
  fetchSavepoints()
}

// 处理排序变化
const handleSortChange = ({ prop, order }) => {
  if (!prop || !order) {
    // 取消排序，恢复默认（按创建时间降序）
    savepointsStore.sortField = 'creation_time'
    savepointsStore.sortOrder = 'desc'
  } else {
    // 设置排序
    savepointsStore.sortField = prop
    savepointsStore.sortOrder = order === 'ascending' ? 'asc' : 'desc'
  }
  // 刷新数据
  fetchSavepoints()
}

// 获取字段显示名称
const getFieldLabel = (fieldValue) => {
  const field = allFields.value.find(f => f.value === fieldValue)
  return field ? field.label : fieldValue
}

const handleSizeChange = (size) => {
  pageSize.value = size
  fetchSavepoints()
}

const handleCurrentChange = (page) => {
  currentPage.value = page
  fetchSavepoints()
}

const fetchSavepoints = async () => {
  try {
    // 如果还没有全部数据统计，先获取
    if (!savepointsStore.totalAll) {
      await savepointsStore.fetchAllStats()
    }
    
    // 确保传递当前选择的字段到API
    savepointsStore.searchForm.fields = [...selectedFields.value]
    savepointsStore.fetchSavepoints()
  } catch (error) {
    componentLogger.error('获取Savepoints列表失败:', error)
  }
}

// 复制到剪贴板功能 - 使用统一工具
const copyToClipboard = async (text, fieldName = '内容') => {
  await copyText(text, fieldName)
}

// 复制作业名称
const handleCopyJobName = async (jobName) => {
  if (!jobName) {
    ElMessage.warning('作业名称为空，无法复制')
    return
  }
  await copyText(jobName, '作业名称', false)
  ElMessage.success({
    message: `作业名称已复制: ${jobName}`,
    duration: 2000
  })
}

const viewDetails = (savepoint) => {
  currentSavepoint.value = savepoint
  showDetailDialog.value = true
}


// 字段变化处理 - 使用防抖优化性能
const handleFieldChange = debounce((fields) => {
  selectedFields.value = fields
  localStorage.setItem('savepoints_selected_fields', JSON.stringify(fields))
}, 100)

// 生命周期
onMounted(() => {
  // 从localStorage恢复用户选择的字段
  const savedFields = localStorage.getItem('savepoints_selected_fields')
  if (savedFields) {
    try {
      selectedFields.value = JSON.parse(savedFields)
    } catch (error) {
      componentLogger.warn('Failed to parse saved fields:', error)
    }
  }
  
  fetchSavepoints()
})
</script>

<style scoped>
.savepoints-container {
  padding: 0;
}

/* 页面头部样式 */
.page-header {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding: 20px 24px;
  border-radius: 12px;
  overflow: hidden;
  color: #303133;
  min-height: 120px;
  border: 1px solid #e4e7ed;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.header-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
}

.bg-gradient {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  opacity: 1;
}

.bg-pattern {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(0,0,0,0.05)" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
  opacity: 0.3;
  animation: float 20s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-20px) rotate(180deg); }
}

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.page-title {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 24px;
}

.title-content {
  flex: 1;
}

.title-icon {
  position: relative;
}

.page-header .title-icon .icon-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px !important;
  height: 36px !important;
  border-radius: 8px !important;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(230, 162, 60, 0.2) !important;
}

.page-header .title-icon .icon-container:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 16px rgba(230, 162, 60, 0.3) !important;
}

.page-header .title-icon .icon-glow {
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  background: linear-gradient(45deg, rgba(230, 162, 60, 0.2), rgba(240, 199, 138, 0.3));
  border-radius: 12px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.page-header .title-icon .icon-container:hover .icon-glow {
  opacity: 1;
}

.title-content {
  flex: 1;
}

.title-main {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.title-main h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  color: #303133;
  letter-spacing: -0.3px;
}

.title-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  background: linear-gradient(135deg, #e6a23c 0%, #f0c78a 100%);
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  color: white;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 8px rgba(230, 162, 60, 0.25);
}

.page-description {
  margin: 0 0 12px 0;
  color: #606266;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  display: flex;
  align-items: center;
  gap: 8px;
}

.page-description .el-icon {
  font-size: 16px;
  color: #909399;
}

.title-meta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #909399;
  font-size: 12px;
  font-weight: 500;
}

.meta-item:hover {
  color: #606266;
  transform: translateY(-1px);
}

.meta-item .el-icon {
  font-size: 16px;
}

/* 统计卡片样式 */
.page-stats {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 20px;
}

.stat-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: #fff;
  border-radius: 8px;
  border: 1px solid #e4e7ed;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  min-width: 120px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.stat-card:hover {
  background: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-color: #409eff;
}

.stat-card:hover::before {
  opacity: 1;
}

.stat-icon {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  font-size: 16px;
  flex-shrink: 0;
}

.stat-card.running .stat-icon {
  background: rgba(103, 194, 58, 0.1);
  color: #67c23a;
}

.stat-card.failed .stat-icon {
  background: rgba(245, 108, 108, 0.1);
  color: #f56c6c;
}

.stat-card.finished .stat-icon {
  background: rgba(64, 158, 255, 0.1);
  color: #409eff;
}

.stat-card.total .stat-icon {
  background: rgba(144, 147, 153, 0.1);
  color: #909399;
}

.stat-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.stat-number {
  font-size: 20px;
  font-weight: 700;
  color: #303133;
  line-height: 1.2;
  margin: 0;
}

.stat-label {
  font-size: 13px;
  font-weight: 500;
  color: #606266;
  margin: 0;
}

.stat-trend {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: #909399;
  margin: 0;
}

/* 搜索区域样式 */
.search-section {
  margin-bottom: 24px;
}

.search-card {
  border-radius: 16px;
  border: none;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.search-card:hover {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

.search-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.search-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.search-title .el-icon {
  color: #409eff;
}

.search-form {
  margin: 0;
}

.search-form .el-form-item {
  margin-bottom: 0;
}

.search-form-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
}

.search-form-fields {
  display: flex;
  gap: 16px;
  flex: 1;
}

.search-form-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

/* 按钮自定义样式 */
.search-btn {
  background: linear-gradient(135deg, #409EFF 0%, #66B3FF 100%);
  border: none;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-weight: 500;
}

.search-btn:hover {
  background: linear-gradient(135deg, #66B3FF 0%, #409EFF 100%);
  box-shadow: 0 6px 20px rgba(64, 158, 255, 0.4);
  transform: translateY(-2px);
}

.reset-btn {
  background: linear-gradient(135deg, #E6A23C 0%, #F0C78A 100%);
  border: none;
  border-radius: 8px;
  color: #fff;
  box-shadow: 0 4px 12px rgba(230, 162, 60, 0.3);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-weight: 500;
}

.reset-btn:hover {
  background: linear-gradient(135deg, #F0C78A 0%, #E6A23C 100%);
  box-shadow: 0 6px 20px rgba(230, 162, 60, 0.4);
  transform: translateY(-2px);
  color: #fff;
}

.refresh-btn {
  background: linear-gradient(135deg, #67C23A 0%, #85CE61 100%);
  border: none;
  border-radius: 8px;
  color: #fff;
  box-shadow: 0 4px 12px rgba(103, 194, 58, 0.3);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-weight: 500;
}

.refresh-btn:hover {
  background: linear-gradient(135deg, #85CE61 0%, #67C23A 100%);
  box-shadow: 0 6px 20px rgba(103, 194, 58, 0.4);
  transform: translateY(-2px);
  color: #fff;
}

.field-btn {
  background: linear-gradient(135deg, #909399 0%, #B1B3B8 100%);
  border: none;
  border-radius: 8px;
  color: #fff;
  box-shadow: 0 4px 12px rgba(144, 147, 153, 0.3);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-weight: 500;
}

.field-btn:hover {
  background: linear-gradient(135deg, #B1B3B8 0%, #909399 100%);
  box-shadow: 0 6px 20px rgba(144, 147, 153, 0.4);
  transform: translateY(-2px);
  color: #fff;
}

/* 字段设置面板 */
.field-selector-panel {
  border-top: 1px solid #e4e7ed;
  padding-top: 16px;
  margin-top: 16px;
}

.field-panel-enter-active,
.field-panel-leave-active {
  transition: all 0.3s ease;
}

.field-panel-enter-from,
.field-panel-leave-to {
  opacity: 0;
  transform: translateY(-10px);
}

.field-sorter {
  margin-bottom: 20px;
}

.sorter-header {
  margin-bottom: 16px;
}

.sorter-header h4 {
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.sorter-description {
  margin: 0;
  font-size: 14px;
  color: #606266;
}

.field-list-sortable {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.field-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: white;
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.field-item:hover {
  border-color: #409eff;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.1);
}

.field-item.field-disabled {
  opacity: 0.6;
  background: #f5f7fa;
}

.field-drag-handle {
  cursor: move;
  color: #909399;
  font-size: 16px;
}

.drag-icon {
  font-family: monospace;
  line-height: 1;
}

.field-checkbox {
  flex: 1;
}

.field-label {
  font-weight: 500;
  margin-right: 4px;
}

.required-mark {
  color: #f56c6c;
  font-weight: bold;
}

.field-group-tag {
  flex-shrink: 0;
}

.field-sort-controls {
  display: flex;
  gap: 4px;
}

.field-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  padding-top: 16px;
  border-top: 1px solid #e4e7ed;
}

/* 表格区域样式 */
.table-section {
  margin-bottom: 24px;
}

.table-card {
  border-radius: 16px;
  border: none;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.table-card:hover {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.table-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.table-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.table-title .el-icon {
  color: #409eff;
}

.table-info {
  display: flex;
  gap: 8px;
}

.table-container {
  width: 100%;
  overflow-x: visible;
  margin: 0 auto;
  border-radius: 12px;
  background: #fff;
}

/* 增强表格样式 */
.enhanced-table {
  font-family: 'Inter', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

.table-container .el-table {
  width: 100% !important;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
}

.table-container .el-table__header {
  background: #f8f9fa;
  border-bottom: 1px solid #e4e7ed;
}

.table-container .el-table th {
  background: transparent !important;
  border-bottom: none;
  padding: 6px 12px;
  vertical-align: middle;
  text-align: left !important;
}

.table-container .el-table th .cell {
  text-align: left !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.table-container::-webkit-scrollbar {
  height: 8px;
}

.table-container::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.table-container::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}

.table-container::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* 简化列标题样式 - 纯中文 */
.column-header-simple {
  font-size: 14px;
  font-weight: 500;
  color: #606266;
  text-align: left;
  padding: 0;
}

/* 表格内容样式 */
.field-content {
  padding: 8px 12px;
  border-radius: 6px;
  transition: all 0.3s ease;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.field-content:hover {
  background: rgba(230, 162, 60, 0.05);
}

/* 可复制字段样式 */
.copyable,
.copyable-field {
  position: relative;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 6px;
  padding: 4px 8px;
  margin: -4px -8px;
  text-align: left;
}

.copyable:hover,
.copyable-field:hover {
  background: rgba(64, 158, 255, 0.1);
  transform: scale(1.02);
}

.copy-hint {
  position: absolute;
  top: 50%;
  right: -24px;
  transform: translateY(-50%);
  opacity: 0;
  transition: all 0.3s ease;
  background: rgba(64, 158, 255, 0.9);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  pointer-events: none;
  z-index: 10;
  white-space: nowrap;
}

.copyable:hover .copy-hint,
.copyable-field:hover .copy-hint {
  opacity: 1;
  transform: translateY(-50%) translateX(-4px);
}

.copy-hint::before {
  content: '';
  position: absolute;
  right: -4px;
  top: 50%;
  transform: translateY(-50%);
  border: 4px solid transparent;
  border-left-color: rgba(64, 158, 255, 0.9);
}

/* 作业名称样式优化 */
/* 作业名称列样式 - 新版复制按钮 */
.job-name-cell-savepoint,
.job-id-cell,
.savepoint-path-cell {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  position: relative;
}

.job-name-text-savepoint,
.job-id-text,
.path-text-ellipsis {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
  font-weight: 400;
  color: #303133;
  line-height: 1.4;
  padding-right: 32px; /* 为按钮预留空间 */
}

.job-id-text {
  color: #409eff;
}

.job-name-cell-savepoint .copy-btn-savepoint,
.job-id-cell .copy-btn-savepoint,
.savepoint-path-cell .copy-btn-savepoint {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  padding: 0;
  opacity: 0; /* 默认隐藏 */
  transition: all 0.3s ease;
  background: linear-gradient(135deg, #909399 0%, #B1B3B8 100%);
  border: none;
}

.job-name-cell-savepoint:hover .copy-btn-savepoint,
.job-id-cell:hover .copy-btn-savepoint,
.savepoint-path-cell:hover .copy-btn-savepoint {
  opacity: 1; /* 悬停时显示 */
}

.job-name-cell-savepoint .copy-btn-savepoint:hover,
.job-id-cell .copy-btn-savepoint:hover,
.savepoint-path-cell .copy-btn-savepoint:hover {
  transform: translateY(-50%) scale(1.1); /* 悬停时放大 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.job-name-cell-savepoint .copy-btn-savepoint:active,
.job-id-cell .copy-btn-savepoint:active,
.savepoint-path-cell .copy-btn-savepoint:active {
  transform: translateY(-50%) scale(0.95); /* 点击时缩小 */
}

/* 旧的作业名称样式 - 保留用于兼容 */
.job-name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
}

.job-name.copyable {
  padding: 8px 32px 8px 0;
}

.job-info {
  flex: 1;
  min-width: 0;
  margin-right: 8px;
}

.job-title {
  font-size: 14px;
  font-weight: 400;
  color: #303133;
  margin-bottom: 2px;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 可复制字段的通用样式 */
.copyable-field {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  min-height: 24px;
  padding: 4px 32px 4px 8px;
}

.copyable-field .el-text,
.copyable-field .el-tag {
  flex: 0 1 auto;
  margin: 0;
  text-align: left;
}

.action-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: nowrap;
  white-space: nowrap;
  justify-content: center;
  align-items: center;
  min-width: 100px;
}

.action-buttons .el-button {
  font-weight: 500;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  width: 32px;
  height: 32px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.action-buttons .el-button:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.action-buttons .el-button:active {
  transform: translateY(0) scale(0.98);
}

.action-buttons .el-button--primary {
  background: linear-gradient(135deg, #409EFF 0%, #66B3FF 100%);
  border: none;
}

.table-container .el-table td {
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  padding: 12px;
  font-size: 14px;
  font-weight: 400;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  text-align: left !important;
}

.table-container .el-table td .cell {
  text-align: left !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 表格行样式 */
.enhanced-table :deep(.el-table__row) {
  transition: all 0.3s ease;
}

.enhanced-table :deep(.el-table__row:hover) {
  background: rgba(64, 158, 255, 0.05) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* 状态行悬停效果 */
.row-success:hover td {
  background: linear-gradient(135deg, rgba(103, 194, 58, 0.05) 0%, rgba(133, 206, 97, 0.05) 100%) !important;
}

.row-danger:hover td {
  background: linear-gradient(135deg, rgba(245, 108, 108, 0.05) 0%, rgba(247, 137, 137, 0.05) 100%) !important;
}

.row-warning:hover td {
  background: linear-gradient(135deg, rgba(230, 162, 60, 0.05) 0%, rgba(240, 199, 138, 0.05) 100%) !important;
}

/* 分页样式 */
.pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 0;
  padding: 24px 32px;
  background: linear-gradient(135deg, #fafbfc 0%, #f8f9fa 100%);
  border-top: 1px solid rgba(228, 231, 237, 0.6);
  border-radius: 0 0 16px 16px;
  position: relative;
}

.pagination::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(64, 158, 255, 0.2) 50%, transparent 100%);
}

/* 为Savepoint页面添加增强分页样式 */
.enhanced-pagination {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  padding: 16px 24px;
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.08),
    0 2px 8px rgba(0, 0, 0, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.enhanced-pagination:hover {
  transform: translateY(-2px);
  box-shadow: 
    0 12px 40px rgba(0, 0, 0, 0.12),
    0 4px 16px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

/* 合并的分页控制容器 */
.pagination-control-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  background: rgba(230, 162, 60, 0.08);
  border: 1px solid rgba(230, 162, 60, 0.2);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
  font-size: 12px;
  height: 24px;
}

.pagination-control-wrapper:hover {
  background: rgba(230, 162, 60, 0.12);
  border-color: rgba(230, 162, 60, 0.3);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(230, 162, 60, 0.15);
}

.page-count {
  font-size: 12px;
  font-weight: 500;
  color: #909399;
  line-height: 1;
}

.divider {
  width: 1px;
  height: 12px;
  background: rgba(230, 162, 60, 0.3);
  margin: 0 2px;
}

.pagination-info {
  font-size: 12px;
  font-weight: 500;
  color: #e6a23c;
  letter-spacing: 0.5px;
  min-width: 24px;
  text-align: center;
  line-height: 1;
}

.pagination-icon {
  font-size: 12px;
  color: #e6a23c;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.pagination-icon.expanded {
  transform: rotate(180deg);
}

/* 状态标签样式优化 */
.status-tag {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 6px 12px !important;
  border-radius: 8px !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

.status-tag:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
}

.status-tag .el-icon {
  font-size: 14px !important;
  display: inline-flex;
  align-items: center;
}

.status-tag span {
  line-height: 1;
  white-space: nowrap;
}

/* 针对不同状态的特殊样式 */
.status-tag.el-tag--success.el-tag--dark {
  background: linear-gradient(135deg, #67c23a 0%, #85ce61 100%);
  border: none;
  color: white;
}

.status-tag.el-tag--success.el-tag--plain {
  background: rgba(103, 194, 58, 0.1);
  border-color: #67c23a;
  color: #67c23a;
}

.status-tag.el-tag--danger.el-tag--dark {
  background: linear-gradient(135deg, #f56c6c 0%, #f78989 100%);
  border: none;
  color: white;
}

.status-tag.el-tag--warning.el-tag--plain {
  background: rgba(230, 162, 60, 0.1);
  border-color: #e6a23c;
  color: #e6a23c;
}

.status-tag.el-tag--primary.el-tag--dark {
  background: linear-gradient(135deg, #409eff 0%, #66b3ff 100%);
  border: none;
  color: white;
}

.status-tag.el-tag--info.el-tag--plain {
  background: rgba(64, 158, 255, 0.1);
  border-color: #409eff;
  color: #409eff;
}

.status-tag.el-tag--info.el-tag--light {
  background: rgba(144, 147, 153, 0.08);
  border-color: rgba(144, 147, 153, 0.3);
  color: #606266;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .page-stats {
    flex-wrap: wrap;
    gap: 16px;
  }
}

@media (max-width: 768px) {
  .savepoints-container {
    padding: 0 10px;
  }
  
  .page-title {
    padding: 20px;
    flex-direction: column;
    text-align: center;
    gap: 16px;
  }
  
  .title-main h1 {
    font-size: 24px;
  }
  
  .page-stats {
    flex-direction: column;
    gap: 12px;
  }
  
  .search-form-content {
    flex-direction: column;
    gap: 16px;
  }
  
  .search-form-fields {
    flex-direction: column;
    gap: 12px;
  }
  
  .search-form .el-form-item {
    width: 100%;
  }
  
  .action-buttons {
    flex-direction: column;
  }
  
  .field-item {
    flex-wrap: wrap;
    gap: 8px;
  }
  
  .field-sort-controls {
    order: -1;
    width: 100%;
    justify-content: center;
  }
}

/* 强制覆盖Element Plus样式 */
.table-container .el-table th .column-header .header-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  height: 18px !important;
  background: rgba(64, 158, 255, 0.08) !important;
  border-radius: 3px !important;
  color: #409eff !important;
  font-size: 10px !important;
  flex-shrink: 0 !important;
  transition: all 0.3s ease !important;
}

.table-container .el-table th .column-header .header-title {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #303133 !important;
  margin-bottom: 1px !important;
  line-height: 1.2 !important;
  letter-spacing: 0.2px !important;
  white-space: nowrap !important;
}

.table-container .el-table th .column-header .header-subtitle {
  font-size: 9px !important;
  color: #909399 !important;
  font-weight: 400 !important;
  line-height: 1.1 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
  white-space: nowrap !important;
}
</style>